<template>
  <div class="company">
    <!-- 头部导航栏 -->
    <van-nav-bar title class="nav" fixed>
      <van-icon slot="left">
        <span class="nav-left">公司</span>
      </van-icon>
      <van-icon slot="right">
        <van-icon name="search" class="icon-left" @click="isSearch=!isSearch" />
        <van-icon name="filter-o" class="icon-right" />
      </van-icon>
    </van-nav-bar>
    <van-search placeholder="请输入搜索关键词" v-model="keywords" v-show="isSearch" />
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 公司内容 -->
      <div
        class="company-item"
        v-for="item in search(keywords)"
        :key="item.uid"
        @click="gocompanyinfo(item.uid)"
      >
        <div class="item-content">
          <div class="item-left">
            <img :src="item.src" alt />
          </div>
          <div class="item-right">
            <h1>{{item.name}}</h1>
            <div style="color:#666666;">{{item.address}}</div>
            <p>
              <span class="sp1">{{item.condition.split(".")[0]}}</span>
              <span class="sp2">{{item.condition.split(".")[1]}}</span>
              <span class="sp3">{{item.condition.split(".")[2]}}</span>
            </p>
            <hr />
            <div class="item-bottom">
              <div>
                热招：
                <span>前端开发</span>等109个职位
              </div>
              <div>
                <van-icon name="arrow" />
              </div>
            </div>
          </div>
        </div>
        <div class="splice"></div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
export default {
  data: () => ({
    companylist: [],
    isLoading: false,
    keywords: '',
    isSearch: false
  }),
  created () {
    this.getcompanylist()
    this.$store.state.activeinfo = 1
  },
  methods: {
    async getcompanylist () {
      const {
        data: { data, status }
      } = await this.$http.get('/company')
      if (status !== 1) return console.log('请求数据失败')
      this.companylist = data
    },

    gocompanyinfo (id) {
      this.$router.push('/company/companyinfo/' + id)
      console.log(id)
    },

    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
      }, 500)
    },

    search (keywords) {
      return this.companylist.filter(item => {
        if (item.name.includes(keywords)) {
          return item
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.company {
  padding: 50px 0 50px 0;
  .nav {
    background: #4dd599;
    height: 50px;
    .nav-left {
      color: #fff;
      font-size: 22px;
      line-height: 50px;
    }
    .icon-left {
      font-size: 26px;
      margin-right: 10px;
      color: #fff;
    }
    .icon-right {
      font-size: 26px;
      color: #fff;
    }
  }
  .item-content {
    display: flex;
    .item-left {
      flex: 1;
      display: flex;
      justify-content: center;
      img {
        height: 50px;
        width: 50px;
        display: block;
        margin-top: 20px;
        border-radius: 5px;
      }
    }
    .item-right {
      flex: 3.5;
      h1 {
        font-size: 18px;
      }
      .sp1 {
        display: inline-block;
        min-width: 55px;
        height: 20px;
        background: #f5f5f5;
        font-size: 14px;
        text-align: center;
        border-radius: 2px;
        color: #666666;
      }
      .sp2 {
        display: inline-block;
        min-width: 60px;
        height: 20px;
        background: #f5f5f5;
        font-size: 14px;
        margin-left: 10px;
        text-align: center;
        border-radius: 2px;
        color: #666666;
      }
      .sp3 {
        display: inline-block;
        min-width: 50px;
        height: 20px;
        background: #f5f5f5;
        font-size: 14px;
        margin-left: 10px;
        text-align: center;
        border-radius: 2px;
        color: #666666;
      }
    }
    .item-bottom {
      font-size: 14px;
      display: flex;
      height: 30px;
      justify-content: space-between;
      padding-right: 20px;
      color: #666666;

      span {
        color: #6decb9;
      }
    }
  }
  .splice {
    background: #f5f5f5;
    width: 100%;
    height: 10px;
  }
}
</style>
<style scoped>
.company >>> .van-search {
  /* position: fixed; */
  width: 100%;
  z-index: 1;
}
.company >>> .van-pull-refresh{
  /* margin-top: 46px; */
}
</style>
